<%@ include file="/WEB-INF/views/jsp/include/include.jsp"%>
<html>
<head>
    <title>Hand In Hand</title>
    <%@ include file="/WEB-INF/views/jsp/include/head.jsp"%>
</head>

<body>
	<%@ include file="/WEB-INF/views/jsp/include/header.jsp"%>
		<%@ include file="/WEB-INF/views/jsp/include/navigator.jsp"%>

	<div class="container-fluid">
		<div id="listCommunities">
			<c:forEach var="community" items="${communityList}">
				<div style="width:400px; height:130px; overflow: hidden; border: 1px solid #898787 !important; border-radius:10px; margin-top: 4px; margin-bottom: 4px; margin-left:4px; margin-right:4px; padding-bottom: 3px;padding-top: 3px;" class="col-xs-4">
					<div class="col-xs-3" style="padding-left: 0;">
					<img style="padding-top: 10px; padding-bottom: 5px; width: 70px;" src=<c:url value="resources/images/community-icon.png"/>
					class="img-rounded">
					</div>
				<div class="col-xs-9" style="padding-top: 8px;padding-left: 0;">
					<a class="list-group-item-warning" href="<spring:url value='/communities/${community.id}'></spring:url>">
						<strong style="font-size: 1.2em; overflow-wrap:break-word;">${community.name}</strong>
					</a>
					<span style="font-size: 0.7em; color: gray;">${fn:length(community.members) } members</span><br>
					<span style="font-size: 0.9em; font-style: oblique; height: 30px; overflow-wrap:break-word;">${community.description}</span> 
				</div>
				</div>
			</c:forEach>
	</div>
		</div>	
	<hr>

<div style="margin: 0 29% !important;"class="col-xs-5"><button class="btn btn-lg btn-primary btn-block" onclick="location.href='<spring:url value="/newCommunity"></spring:url>'" >Create New Community</button></div>

	<%@ include file="/WEB-INF/views/jsp/include/footer.jsp"%>

</body>
</html>